<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="icon" href="img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="CSS/login.css" />
        <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
        <style>
            #sendBtn {
                position: absolute;
                width: 100px;
                right: 10px;
                top: 30px;
                border:0;
                background: transparent;
                color: #ff782c;
            }
            #sendBtn:disabled{
                color: grey;
            }
        </style>
	</head>
	<body>
		<!-- 小米账号导航栏 -->
		<div class="header-bg">
			<div class="header-left"><img src="img/login/loginleft.jpg"></div>
			<div class="header-right Container ">
				<div class="clearfix one">
					<a href="https://account.xiaomi.com/fe/service/login"><img src="img/login/logomi2.png"></a>
					<span class="header-item-tit">小米账号</span>
					<ul class="header-list-tit fr">
						<li>用户协议</li>
						<li>隐私政策</li>
						<li>帮助中心</li>
						<li class="language-title">
							<div>‎中文(简体)‎<span class="iconfont icon-sanjiaoxing"></span></div>
							<div class="language-list">
								<ul>
									<li>‎‎中文(繁體)‎</li>
									<li>English</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
				<div class="login-box">
					<div class="login Container">
						<div class="Scan">
							<a class="iconfont icon-qrcode-1-copy"></a>
						</div>
						<div><!-- 扫码登录左侧一行字 -->
							<span class="Scan-text">扫码登录</span>
							<span class="Scan-text-triangle"></span>
						</div>
						<div>
							<ul class="login-list-tit">
								<li class="log login-active">登录</li>
								<li class="resg">注册</li>
							</ul>
						</div>
						<!-- 登录模块 -->
						<div class="login-sum">
                            <form action="/login" method="post" id="loginForm">
							<div class="mobile">
								<label for="login-number" class="focus">邮箱/手机号码/小米ID</label>
								<input id="login-number" name="username" class="login-user" type="text" autocomplete="off"/>
							</div>
							<div class="password">
								<label for="login-password" class="focus">密码</label>
								<input id="login-password" name="password" class="login-password" type="password" /><span id="eye1" class=""></span>
								
							</div>
							<div><a id="login-button" class="login-button">登录</a></div>
							<div class="login-bottom">
								<span>忘记密码？</span>
								<span>手机号登录</span>
							</div>
							<div class="login-other-text">其他方式登录</div>
							<div>
								<ul class="login-other">
									<li><a href="" class="iconfont icon-qq"></a></li>
									<li><a href="" class="iconfont icon-weibo"></a></li>
									<li><a href="" class="iconfont icon-zhifubao"></a></li>
									<li><a href="" class="iconfont icon-weixin"></a></li>
								</ul>
							</div>
                            </form>
						</div>
                        <!-- 注册模块 -->
                        <div class="register-sum">

                            <div class="register-message-box">
                                <input id="register-number" class="register-number" type="text" placeholder="手机号" value=""/>
                            </div>
                            <div class="register-message-box">
                                <input id="register-password" class="register-number" type="password" placeholder="密码" value=""/>
                            </div>
                            <div class="message">
                                <label for="register-message" class="focus">短信验证码</label>
                                <input id="register-message" class="register-message" type="text"/>
                                <button id="sendBtn" type="button">发送验证码</button>
                            </div>
                            <div><a id="register-button" class="register-button">注册</a></div>
                            <div class="login-bottom"><a href="#"> 收不到验证码？</a>
                            </div>
                            <div><input id="register-chec" class="chec" type="checkbox"><label for="register-chec">已阅读并同意小米账号用户协议和隐私政策</label>
                            </div>
                            <div class="login-other-text">其他方式登录</div>
                            <div>
                                <ul class="login-other">
                                    <li><a href="" class="iconfont icon-qq"></a></li>
                                    <li><a href="" class="iconfont icon-weibo"></a></li>
                                    <li><a href="" class="iconfont icon-zhifubao"></a></li>
                                    <li><a href="" class="iconfont icon-weixin"></a></li>
                                </ul>
                            </div>
                        </div>
						<!-- 扫码登录模块 -->
						<div class="scan-sum">
							<div class="scan-tit">扫码登录 安全快捷</div>
							<div class="scan-img"><img src="img/login/scan.jpg" ></div>
							<div class="scan-text">请使用小米手机/米家等小米旗下APP扫码登录</div>
							<div class="scan-other">支持扫码登录的App</div>
							<div class="scan-other-list">
								<ul>
									<li>
										<span><img src="img/login/mijia.png" style="width: 50px; height: 50px;"></span>
										<p>米家</p>
									</li>
									<li>
										<span><img src="img/login/logomi2.png"  style="width: 50px; height: 50px;"></span>
										<p>小米商城</p>
									</li>
									<li>
										<span><img src="img/login/xiaoai.png"  style="width: 50px; height: 50px;"></span>
										<p>小爱音箱</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="desc">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>
		</div>
		<script src="/JS/login.js"></script>
        <script src="/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(["layer"],function(){
                var layer = layui.layer;
                var $ = layui.jquery;
                var EY = document.querySelector('#eye1');
                EY.className = 'iconfont icon-eye';
                var sta = true;


                //发送验证码按钮事件
                $("#sendBtn").on("click", function () {
                    //获取手机号的值
                    var tel = $("#register-number").val();
                    if (!tel) {
                        layer.msg("请输入手机号");
                        return false;
                    }
                    var m = 60;
                    var timer = null;
                    var f = function () {
                        m -= 1;
                        if (m == 0) {
                            $("#sendBtn").text("重新发送");
                            $("#sendBtn").prop("disabled",false);
                            clearInterval(timer);
                        } else {
                            $("#sendBtn").text("重新发送 " + m+"s");
                        }
                    };
                    $.post("/sendCode", {tel: tel}, function () {
                        $("#sendBtn").prop("disabled", true);
                        timer = setInterval(f, 1000);
                        //禁用按钮60秒
                    });
                });



                EY.onclick = function(){
                    if(sta){
                        EY.className='iconfont icon-eye1';
                        logipas.type='text'

                    }else{
                        EY.className='iconfont icon-eye';
                        logipas.type='password'
                    }
                    sta = !sta;
                }

                var errMsg = '[[${errMsg}]]';
                if(errMsg){
                    layer.msg(errMsg);
                }


                var Logi = document.querySelector('.log');
                var Resgi =document.querySelector('.resg');
                var LOdisp = document.querySelector('.login-sum');
                var REdisp = document.querySelector('.register-sum');


                Logi.onclick=function(){
                    LOdisp.style.display = 'block';
                    REdisp.style.display = 'none';
                    Logi.className = 'log login-active'
                    Resgi.className = 'resg'
                }

                Resgi.onclick=function(){
                    LOdisp.style.display = 'none';
                    REdisp.style.display = 'block';
                    Logi.className = 'log'
                    Resgi.className = 'resg login-active'
                }

                //扫码登陆
                var sca = document.querySelector('.Scan');
                var im  = document.querySelector('.Scan a');
                var statu = true;

                sca.onclick=function(){
                    var one = document.querySelector('.resg').classList.contains('login-active');
                    if(statu == true){
                        im.className = 'iconfont icon-diannao';
                        document.querySelector('.scan-sum').style.display = 'block';
                        document.querySelector('.login-list-tit').style.display= 'none';
                        document.querySelector('.Scan-text').innerHTML = '密码登录';
                        document.querySelector('.register-sum').style.display= 'none';
                        document.querySelector('.login-sum').style.display= 'none';
                    }else{
                        im.className = 'iconfont icon-qrcode-1-copy';
                        document.querySelector('.scan-sum').style.display = 'none';
                        document.querySelector('.login-list-tit').style.display= 'block';
                        document.querySelector('.Scan-text').innerHTML = '扫码登录';
                        console.log(one)

                        if(one == true){
                            console.log('1');
                            document.querySelector('.register-sum').style.display= 'block';
                            document.querySelector('.login-sum').style.display= 'none';
                        }else{
                            console.log('2')
                            document.querySelector('.register-sum').style.display= 'none';
                            document.querySelector('.login-sum').style.display= 'block';
                        }
                    }
                    statu = !statu;
                }

                //扫码登陆获取焦点时，左侧显示一行字
                document.querySelector('.Scan').onmouseenter=function(){
                    document.querySelector('.Scan-text').style.display = 'block';
                    document.querySelector('.Scan-text-triangle').style.display = 'block';

                }
                document.querySelector('.Scan').onmouseleave=function(){
                    document.querySelector('.Scan-text').style.display = 'none';
                    document.querySelector('.Scan-text-triangle').style.display = 'none';

                }


                //登录按钮   判断条件，符合则进入首页
                var logibtn = document.querySelector('.login-button');
                var logiuse = document.querySelector('.login-user');
                var logipas = document.querySelector('.login-password');
                logibtn.onclick=function(){
                    if(!logiuse.value || !logipas.value){
                        layer.msg("用户名或密码不能为空")
                        return false;
                    }else{
                        $("#loginForm").submit();
                    }
                }

                //注册按钮
                var resibtn = document.querySelector('.register-button');
                var resinum = document.querySelector('.register-number');
                var resimes = document.querySelector('.register-message');

                var che =document.querySelector('.chec');
                resibtn.onclick=function(){
                    var phonenu = resinum.value;
                    var messnu = resimes.value;
                    if(phonenu==0 || messnu==0){
                        alert('请输入手机号或验证码');
                        return;
                    }if(phonenu.length != 11){
                        alert('请输入正确的手机号');
                        return;
                    }if(messnu.length != 6){
                        alert('请输入正确的六位验证码');
                        return;
                    }if(che.checked==false){
                        alert('请先勾选用户协议');
                        return;
                    }

                    alert('注册成功');
                    document.querySelector('.mobile label').classList.add('focus');
                    document.querySelector('#login-number').value=document.querySelector('#register-number').value;
                    document.querySelector('.register-sum').style.display = 'none';
                    document.querySelector('.login-sum').style.display = 'block';
                    document.querySelector('.resg').classList.remove('login-active');
                    document.querySelector('.log').classList.add('login-active');
                }
            });

			
		</script>
	</body>
</html>
